Introduction to Web Design - 10. Cascading Style Sheets
10.1 Inline Styles using the "style" Attribute | 10.2 Embedded Styles in the Head Section | 10.3 External Style Sheets
  1. Preface
  2. Markup Languages – A Definition and Some History
  3. Beginning HTML
  4. HTML Lists
  5. HTML Tables
  6. HTML - Color, Fonts and Special Characters
  7. HTML Links
  8. HTML Images
  9. HTML Frames
  10. Cascading Style Sheets
  11. MicroSoft PhotoDraw
  12. JavaScript
  13. HTML Forms and Form Handling
  14. VBScript
  15. MicroSoft FrontPage
  16. Active Server Pages
  17. Java Applets
  18. XML Meaning and More
  19. Macromedia Flash 5.0
  20. References
As we have seen throughout the previous sections of this document, there are a number of ways to influence the appearance of webpages with color, text sizes, font faces, etc. One piece of advice to designers of websites, is that it is a good idea for all of the pages of a website to have the same basic appearance. This provides a context and clues to the user regarding where they are in terms of web navigation. If you wish to do a good bit of customizing the appearance of the pages of a website, you can imagine how tedious and error prone it would be to include all of these customizations on each page of the website. For example, if you wanted to specify certain colors for the background, text and links of the website, you would need to include these attributes in each BODY tag of each page of the website. If you wanted to dictate other aspects of the pages’ appearance, all of these would need to be written down as “rules” to be followed when editing or adding a webpage for the site. For example, suppose you never wanted to use an <H1> level heading because you feel that it is just too large or you wanted every <H1> level heading to be red. Whenever you, or someone else, worked on a webpage, the “rules” would need to be consulted to ensure a consistent appearance with the rest of the site. If the “rules” were changed, each webpage on the site would need to be updated to conform to the new version of the rules. This process would be tedious and errors would be likely.

Cascading Style Sheets (CSS) are an attempt to address this problem. Using a style sheet, the web designer can define the appearance aspects of many tags in one place. Then, each webpage only needs to link to the style sheet in order for the appearance specifications to be implemented on each page. If the style sheet is changed, the change will be seen the next time each page is displayed in a browser.

The “cascading” aspect of Cascading Style Sheets is a consequence of the “styles” that can be dictated by the browser, the user and the designer. Styles defined by the author of a webpage take precedence over the style set by the user, which take precedence over the default style of the browser. We will look at styles that can be set by the author. However, users can specify their own style sheets, if they so desire. For example, a visually impaired person may want to specify a very large font size in their own style sheet to be used with a browser. (This can be done via the Tools/Internet Options menu selection in Internet Explorer and via the Edit/Preferences menu selection in Netscape. The user can instruct the browser to ignore author style sheets.) Additionally, when nesting tags for which styles have been defined, the inner tag will “inherit” the style of the outer tag unless the inner tag is more specific (has more details). In that case, the inner tag style will override the style of the outer tag. An example of nesting styled tags will be reviewed later in this section.

This section will first take a brief look at applying the style attribute to individual tags. Then, embedded style sheets will be discussed followed by how to link to an external style sheet. Please note that many of the examples used in this section were adapted from Deitel, Deitel & Nieto (2002).

10.1 Inline Styles Using the "style" Attribute

Before getting into Cascading Style Sheets, we will look at how the appearance of individual tags can be altered with the “style” attribute. The style attribute for a tag uses Cascading Style Sheet properties and values to change the appearance of an element. (For a complete list of CSS properties, see http://www.w3.org/TR/REC-CSS2/propidx.html .) For example, the following line specifies a color (#FF0000 is red) for this particular anchor <A> tag. 

<A HREF = "first3.htm#cisdescriptions" style = "color: #FF0000"> 
		CIS Course Descriptions</A>


The syntax for style attribute values is the CSS property, a colon, a space and then the value. More than one CSS property can be applied to a tag using a single style attribute by placing a semicolon between the property: value pairs. For example, the following line specifies both a color and a background color for an <H1> heading tag. 

<h1 style = "color: #0000FF; background-color: #00FF00"> 
		Additional Information </h1>


  1. Open your “second.htm” file in Notepad and save it as “inlinestyles.htm”. Edit the first anchor <A> tag the <H1> tag to include the style attribute as above.
  2. Save the file and view it in a browser. Note how the background color for the heading tag extends across the width of the browser window.

10.2 Embedded Styles in the HEAD Section of a Document

This section will look at how the style for a particular tag can be described once at the top of an HTML document in order to affect every use of that tag within that document. This is accomplished by using the style tag <style> … </style> tag inside the <head> section after the <title> … </title> of an HTML document. For example: 


<html>
<head>
<title> Style Tags in the HEAD section </title>
<style type = "text/css">
  em { background-color: #0000FF;
       color: #FFFFFF}

  h1 { font-family: arial}
</style>

</head>

<body>

<h1> Additional Information </h1>

<em> Blah, blah, blah… </em>
<BR>
And even more blah, blah, blah...

<h1> <em> 
	More Additional Information </em> </h1>

</body>
</html>


In this HTML page, the style tag follows the <title> of the page in the <head> section. The type attribute of the style tag indicates the MIME (Multipurpose Internet Mail Extension) type. CSS documents use the “text/css” MIME type. Other MIME types define file types for images, scripts, etc.

Following the beginning style tag, is a list of tags for which styles will be defined. In this example, styles are defined for emphasis and level 1 heading (<em> and <h1>) tags. Note that the tags for which styles are specified do not include the angle brackets that are required when the tag is used in the body of the document. The style for each tag is enclosed in a set of curly braces, {}. The style for a tag is defined with property: value pairs. If more than one property is defined for a tag, semicolons are used to separate a property: value pair from the next. The em tag style demonstrates this. The em style specifies two properties: a text color as well as a background color. The style for the level 1 heading tag specifies only one property, a font-family.

  1. Open a new file in Notepad called “embeddedstyles.htm” and copy the code above in this section to the file. Save it and view it. Notice that the second use of the <h1> tag has an <em> tag nested inside of it. The result of this nesting is that the style for the <em> tag is taking precedence over the default color of the <h1> tag and the heading appears in the arial font-family, in white with a blue background.

10.3 External Style Sheets

If each document of a website has the same style, users will associate that “look” with the site or organization itself. It becomes a “brand” look identifiable with the site. If the style is embedded in each document, every change to the style would require changing every single document individually. If instead of putting the style specifications in each document, each document is linked to one style sheet, any change to the style need only be done in the style sheet.

This section introduces a number of style properties, but there are many more that can be utilized.
10.3.1 An External Style Sheet Example
Each part of the following example of an external style sheet will be discussed below: 


<!--external style sheet for Sea Jam Web Consulting -->
<!--cjmstyle.css -->

a { color: #800080; 
    text-decoration: none}

a:hover { text-decoration: underline;
	  background-color: #FFFACD}

body { background-image: url(images/cjmlogo.gif);
       background-position: bottom right;
       background-repeat: no-repeat;
       background-attachment: fixed}

p { text-indent: 2em}

div { font-size: 2em;
      background-color: #E6E6FA; 
      padding: .5em;
      margin: .5em}

li { list-style: url(images/blueball2.jpg) disc }

.medium { border-width: medium}
.blue { border-color: #0000CD}
.groovy { border-style: groove}
.framelike { border-style: inset}
.ltblue { border-color: #F0F8FF}


The first thing to note about the external style sheet is that it is NOT an HTML document. It is a plain text file that was created in Notepad. The content of the style sheet file is similar to the content contained between the <STYLE> tags of the embedded style document discussed in the section above.

The a specification: The style for the <A> tag will have the RGB color #800080. The text-decoration property is none. Other values for the text-decoration property a re underline, overline, line-through and blink. The value none will result in no underlining for the links in the documents that use this style sheet.

The a:hover specification: “hover” is a pseudoclass. Pseudoclasses respond to user actions. The “hover” pseudoclass is activated when the user positions the mouse cursor over an HTML element. The result of this style for the hover pseudoclass for documents using this style sheet is that the link will have a different background color and will be underlined. Other pseudoclasses are link for unvisited links, visited for links that have been visited, and active for links that have been clicked on but have not yet loaded. Styles can be specified for each of these.

The body specification: The properties used in the body style affect the background image. The first property has the URL for the background image. The background-position property specifies that the image is to appear at the bottom right of the browser window. The background attachment value is fixed, so that no matter how the browser window is re-sized, the image will always be at the bottom right corner of the window. The background-repeat property is set to no-repeat, so the image appears only once.

The p specification: The style for the p tag indicates a first line indent of “2em”. The “em” notation is a relative length reference. The “em” is the “M-height” of the current font or the height of an uppercase letter “M” in the current font. “2em” gives an indentation of the height of 2 times the M-height. Other relative references are “ex”, which is the “x-height” or height of an lowercase letter “x”, and “px”, which is a pixel reference varying with the resolution of the screen.

Note that when defining a style for the <p> tag, a closing tag, </p>, must be used to end the application of the style.

The div specification: The <div> tag is similar to using beginning and closing <p> tags. The <div> … </div> tags define a block of text with margins above and below. The style defined for the div tag in the style sheet here defines a different background color, and a font size that is twice the “M-height” of the current font. The padding value provides space around the top, bottom and sides of the elements within the div tag. The margin value provides space around the outside of the div tags. More will be said about this later in this section.

The li specification: The <li> list item tag specifies an image to use instead of the usual bullet. Note that the URL of the image is placed in parentheses.

Classes: The last three items in the style sheet file are user-defined classes. These classes can be applied to tags as desired. Class names are preceded by a period. It is a good idea to name them something meaningful such as “medium” and “blue” above which indicate a medium border width and a border color of blue. However, just to prove that you can define the class name, “groovy” is a class indicating a border type of “groove” and “framelike” is a class indicating a border type of “inset”.

10.3.2 Linking an HTML page to an External Style Sheet
Now that we have a style sheet defined, let’s look at how we use it and look at the results of the properties, values and classes defined.

To use an external style sheet, we provide a link to it within the <head> section of the HTML document after the <title> tag. The link is implemented with a <link> tag.

  1. Open a new file in Notepad and copy the style sheet specifications above into it. Save the file as “cjmstyle.css”.
  2. Create a new HTML document in Notepad. Put any title you like in the <head> section and leave the <body> blank for now. Save the file as “extstyle1.htm”.
  3. Add the following <link> tag after the <title> tags in the <head> section of the file: 

    
<link rel = "stylesheet" type = "text/css" 
	href = "cjmstyle.css">


    The rel attribute of the <link> tag indicates the relationship between the linked file and this one. The linked file is a style sheet to use with this HTML file. The type attribute is the same as was used with the embedded style in the section above. It indicates that the file is a text file for a cascading style sheet. Finally, there is an href attribute which has the URL for the stylesheet file.

  4. Next, in the <body> section of the file, add the following: 

    
<div style = "float: left; text-align: left; width: 200px" 
class = "medium groovy blue"> 

Sea Jam <br>
Web Site <br>
Consulting

</div>


    The beginning <div> tag contains both a style and a class definition. The float property for the style lets us place the contents of the div tags and let other text flow around them. Here, the div contents will be aligned to the left of the browser window. The text within the div tags will be aligned to the left according to the text-align property. Finally, the width of the div block is specified to be 200px. The effect of this will be seen when we view the page. We could have set the width to a percent of the browser window. If we had done that, the div block would change width as the user re-sizes the browser window.

    Some of the classes defined in the style sheet above are applied to this use of the div tag by using the class attribute. All of the classes that we wish to apply are listed within double quotes and separated by spaces. Here a blue groove border with a medium width will be applied to this use of the div tag. Remember that the styles and classes applied to this div tag are in addition to the style specified for the div tag in the external style sheet.

  5. Next, copy the following paragraph to your file after the <div> section above: 

    
<p>
This is a page which uses a style sheet for a fictitious 
company called Sea Jam Web Site Consulting.  Notice that 
this paragraph is indented.  Notice that the background 
image is fixed and non-repeating in the top right corner.  
Notice that the items in the list below use an image 
instead of the usual button.  Notice that this page 
is not necessarily well-designed.  Notice that 

<A HREF = "extstyle2.htm"> this link</A> 

is not very noticeable until you put your cursor over it.  
Try moving your cursor over the list items below.  The 
list items are links as well.  That effect was done with 
the <em> hover</em> pseudoclass.  That pseudoclass is 
activated when the user moves the mouse cursor over the link.
</p>


  6. Save the file and view it in a browser. It should look like this:

  7. The box in the top left corner has an appearance very similar to that of an image, but it was done using the <div> tags and a combination of style properties implemented in part with inline styles and in part by the external style sheet . The paragraph, which follows in the HTML file, is to the right of the box due to the float: left property applied inline to the <div> tag. The float property allows one to position elements and change the default flow of the text.

    Try re-sizing the window using the Restore button (middle button in the right corner of the titlebar. Notice that the box in the top left corner stays the same size when the window is re-sized. This is because the <div> tag was given a set width in pixels. If the width had been set using a percentage for the width, this box would change width with the window and the text inside would re-arrange itself accordingly.

    Notice also, that as the window is re-sized, the background image in the bottom right corner stays in place and the paragraph text flows over it when necessary. This is due to the fixed placement specified for the <body> tag in the external style sheet.

    Additionally, look at the link in the middle of the paragraph. It is not underlined, which is the default appearance for links, because the text-decoration property was set to “none” in the external style sheet.

    Move your cursor over the link. When the mouse cursor is over the link, the background of the link text should change to yellow and the link text should be underlined. This is due to the “hover” pseudoclass available for the anchor, <a>, tag.

  8. Let’s try out some of the other styles specified in the external style sheet. Add the following to the “extstyle1.htm” file after the paragraph entered earlier: 

    
<p>
This paragraph is also indented because of the 
style set for the P tag.  The box in the top 
left corner of this page looks like a graphic, 
but it is actually done by setting a style for 
the DIV tag.  The width for the DIV tag has been 
set to a pixel value.  The width could be set to 
be a percentage of the browser window, but then, 
if the browser window is re-sized, the size of the 
box changes also.  Notice that there is a background 
image at the bottom right corner of the page. The 
image does not repeat, as a standard image will do.   
Try clicking the restore button on the top right of 
your browser window.  Notice that the background 
image remains in the corner.  Even if you scroll 
the page, the background image remains in the corner.  
This is because the background image attachment has 
a fixed position.  
</p>

<BR>

<h3 class = "framelike ltblue medium"> 
	Here is a list with images instead of the usual bullet discs </h3>

<UL>
	<LI> <A HREF = "extstyle2.htm"> one link to the second page</A>
	<LI> <A HREF = "extstyle2.htm"> another link to the second page</A>
</UL>


  9. Save your file and view it in a browser. The new code should appear as follows:



    Notice that the new paragraph is indented and flows after the previous paragraph. The classes defined for borders are applied to the <h3> tag to put an inset light blue border around the headings. The bulleted list uses an image created in MicroSoft PhotoDraw instead of any of the bullet types available in HTML. Both of the items in the list are links. Moving your cursor over them changes the background of the linked text to yellow and the text is underlined.

References

  1. Dietel, H. M., Dietel, P. J. & Neito, T. R. (2001) Internet & World Wide Web: How to Program. 2nd Edition. Prentice Hall, NJ.
  2. Anderson-Freed, S. (2002) Weaving a Website: Programming in HTML, Javascript, Perl and Java. Prentice-Hall:NJ. ISBN 0-13-028220-0
  3. Lynch, P. J. & Horton, S. (2001) Web Style Guide. Yale University Press: New Haven. ISBN 0-300-08898-1.
  4. Yale Web Style Guide at http://info.med.yale.edu/caim/manual/contents.html.
  5. W3C Cascading Style Sheets, Level 2 www.w3.org/TR/REC-CSS2
  6. W3C CSS Tutorial for HTML http://www.w3.org/TR/REC-CSS2/intro.html#q1
  7. W3C CSS Properties http://www.w3.org/TR/REC-CSS2/propidx.html
  8. W3C CSS Pseudoclasses http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes
  9. CSS Properties, Browser Support, etc. http://www.webreview.com/style/

Cynthia J. Martincic
cynthia.martincic@email.stvincent.edu
CIS Department
Saint Vincent College
Latrobe, PA 15650